<!-- 取餐 -->
<template>
	<view class="processFlow">
		<model-page>
		<Search :searchResult="serchText">
			<view  @click="cancelSearch">
				取消
			</view>
		</Search>
		<view class="sortWrap">
			<image :src="`/static/image/alarm/${sortFlag ? 'sort_active' : 'sort'}.png`" mode="" class="sort" @click="changeSort"></image>
		</view>
		<view class="tableWrap">
			<Table 
			:headList="headList" 
			:tableData="tableData" 
			pageType="orderFood"
			v-model:pageNum="postData.pageNum"
			:pageSize="postData.pageSize"
			 @checkPage="checkPage"
			 :stateList="stateList"
			></Table>
		</view>
		</model-page>

	</view>
	<!-- 显示顶部筛选框-->
			<uni-popup ref="popup" background-color="#fff" :mask-click="false">
				<view class="popup_wrap">
					<view>
						<view class="popup_title">
							处理状态
						</view>
						<view class="popup_content">
							<view class="popup_item" v-for="(val,index) in dealStateList" :key="index" :class="{
								popActive:index === dealTypeCurrent
							}" @click="selectDealType(index,val.id)">
								{{val.label}}
							</view>
						</view>
					</view>
					<view>
						<view class="popup_title">
							用餐时间
						</view>
						<view class="popup_content">
							<view class="popup_item" v-for="(val,index) in mealTimeList" :key="index" :class="{
								popActive:index === mealTypeCurrent
							}" @click="selectMealType(index,val.id)">
								{{val.label}}
							</view>
						</view>
						
					</view>
					<view class="btn_group">
						<view @click="reset">重置</view>
						<view @click="confirm">确认</view>
						
					</view>
				</view>
				
			</uni-popup>
</template>

<script setup> 
	import {reactive, ref} from 'vue'
	import Table from '../../../component/Table.vue';
	import Tabs from '../../../component/Tabs.vue';
	import Search from "../../../component/Search.vue"
	import {takeFoodList} from '@/api/order.js'
	import {onLoad,onShow} from "@dcloudio/uni-app"
	const dealStateList = [
		{id:"",label:"全部"},
		{id:"2",label:"待出餐"},
		{id:"3",label:"已出餐"},
		]
	const mealTimeList = [
		{id:"",label:"全部"},
		{id:"1",label:"早餐"},
		{id:"2",label:"午餐"},
		{id:"3",label:"晚餐"},
		]
	const searchText = ref("")
	const changeTabs = (e)=>{
		console.log(e);
	}
	const popup = ref()
	const sortFlag = ref(false) //启用筛选条件
	const changeSort = ()=>{
		popup.value.open("bottom")
	}
	const dealTypeCurrent = ref(0) //处理状态
	const mealTypeCurrent = ref(0) //餐饮状态
	const selectDealType = (index,state)=>{
		dealTypeCurrent.value = index
		postData.recordStatus =  state
	}
	const selectMealType = (index,state)=>{
		mealTypeCurrent.value = index
		postData.orderType = state
	}
	const stateList = [{
		id:2,
		label:"待出餐",
		color:"#2778FF",
		path:"/packagePickUpFood/pages/detail/detail"
	},{
		id:3,
		label:"已出餐",
		color:"#00C45C",
		path:"/packagePickUpFood/pages/detail/detail"
	}
	]
	// 测试数据
	const headList = ref([
		{
			title:"房间",
			props:"roomId",
			width:"20%"
		},
		{
			title:"老人名",
			props:"elderName",
			width:"20%"
		},
		{
			title:"用餐时间",
			props:"eatDate",
			width:"45%"
		},
		{
			title:"状态",
			props:"recordStatus",
			width:"15%"
		},
	])

	
	const reset = ()=>{
		dealTypeCurrent.value = 0
		mealTypeCurrent.value = 0
		postData.recordStatus = ""
		postData.orderType = ""
		postData.pageNum = 1
		postData.pageSize = 10
	}
	const confirm = ()=>{
		popup.value.close()
		if(dealTypeCurrent.value || mealTypeCurrent.value){
			sortFlag.value = true
		}else{
			sortFlag.value = false
		}
		postData.pageNum = 1
		postData.pageSize = 10
		getTakeOrderList()
	}
//********************************** 取餐功能模块*************************************************
const tableData = ref([]) 
const postData = reactive({
	recordStatus:"",
	pageNum:1,
	pageSize:10,
	orderType:"",
	elderId:""
})
const total = ref(0)
	// 获取取餐列表
const orderTypeMenu = {"1":"早餐","2":"中餐","3":"晚餐"}
const getTakeOrderList = async()=>{
try{
const {code,data:res} = await takeFoodList(postData)
if(code === 200){
	total.value = res.total
	tableData.value = res.list.map(val=>{
		return {
			id:val.id,
			roomId:`${val.elderBasicInfoDto.buildingId}栋${val.elderBasicInfoDto.floorId}层${val.elderBasicInfoDto.roomId}号`,
			elderName:val.elderBasicInfoDto.elderName,
			elderId:val.elderBasicInfoDto.id,
			eatDate:val.eatDate,
			recordStatus:val.recordStatus,
			orderType:orderTypeMenu[val.orderType]
		}
	})
}	
}catch(e){
	//TODO handle the exception
	return Promise.reject(e)
}

}
// 切换分页
const checkPage = ()=>{
	getTakeOrderList()
}
onLoad(()=>{
	uni.$on("undateElderId",(option)=>{
		const {type,searchResult} = option
		serchText.value = searchResult || ""
		postData.pageNum = 1
		postData.pageSize = 10
		postData.recordStatus = ""
		postData.orderType = ""
		postData.elderId = type
		dealTypeCurrent.value = 0
		mealTypeCurrent.value = 0
		sortFlag.value = false
		getTakeOrderList()
	})
})
onShow(()=>{
	getTakeOrderList()
})
const serchText = ref("")
const cancelSearch = ()=>{
	serchText.value = ""
	postData.elderId = ""
     getTakeOrderList()
}
</script>

<style lang="less" scoped>
	.processFlow{

		.tableWrap{
			margin-top: 28rpx;
		}
		.sortWrap{
			padding: 20rpx 0 0;
			display: flex;
			justify-content: flex-end;
			.sort{
					width: 50rpx;
					height: 46rpx;
			}
		}

		
	}

.popup_wrap{
	padding: 28rpx;
	background-color:#fff;
	border-radius: 10rpx 10rpx 0 0;
	.popup_title{
		font-size: 28rpx;
		color: #999999;
		margin-bottom: 24rpx;
	}
	.popup_content{
		display: flex;
		flex-wrap: wrap;
		.popup_item{
			height: 56rpx;
			line-height: 56rpx;
			padding: 0 24rpx;
			background: #F2F8FF;
			border-radius: 8rpx;
			margin:0 16rpx 24rpx 0;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}
		.popActive{
			background: linear-gradient( 180deg, #73B6FF 0%, #1881F4 100%);
			color: #FFFFFF;
		}
	}
	.btn_group{
		display: flex;
		margin-top: 30rpx;
		>view{
			flex: 1;
			height: 80rpx;
			border-radius: 40rpx;
			font-weight: 500;
			font-size: 32rpx;
			text-align: center;
			line-height: 80rpx;
			&:first-child{
				background: #F2F8FF;
				color: #666666;
				margin-right: 30rpx;
			}
			&:last-child{
				background: linear-gradient( 180deg, #74B7FF 0%, #1680F3 100%);
				color: #FFFFFF;
			}
		}
	}
}

</style>
